<nz-card nzSize="default" class="m-b-4">
    <button
        *ngIf="permission.userPermission.has('ihapp:appManagement:addLevel1')"
        nz-button
        nzType="primary"
        class="m-r-8"
        (click)="onOpenOneModalAdd()">
        新增一级分类
    </button>
    <button
        *ngIf="permission.userPermission.has('ihapp:appManagement:addLevel2')"
        nz-button
        nzType="primary"
        class="m-r-8"
        (click)="onOpenTwoModalAdd()">
        新增二级分类
    </button>
    <button
        *ngIf="permission.userPermission.has('ihapp:appManagement:addLevel3')"
        nz-button
        nzType="primary"
        (click)="onOpenThreeModalAdd()">
        新增三级分类
    </button>
</nz-card>

<nz-card nzSize="default" class="table-content">
    <div class="table-wrap">
        <nz-table
          #basicTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzOuterBordered
          [nzFrontPagination]="false"
          [nzScroll]="{ x: '1100px' }"
          [nzLoadingDelay]="100"
          [nzLoading]="tableLoading"
          [nzData]="tableData?.records"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="tableData.total"
          [nzPageIndex]="queryForm.pageNum"
          [nzPageSize]="queryForm.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
        >
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="120px">ID</th>
                    <th nzAlign="center" nzWidth="300px">名称</th>
                    <th nzAlign="center" nzWidth="100px">状态</th>
                    <th nzAlign="center" nzWidth="120px">适用用户</th>
                    <th nzAlign="center" nzWidth="180px">跳转方式</th>
                    <th nzAlign="center" nzWidth="320px">链接/值</th>
                    <th nzAlign="center" nzWidth="150px">图标</th>
                    <th nzAlign="center" nzWidth="120px">排序</th>
                    <th nzAlign="center" nzWidth="280px" nzRight>操作</th>
                </tr>
            </thead>
    
            <tbody>
                <tr *ngFor="let item of basicTable.data; let index = index;">
                    <!-- ID -->
                    <td nzAlign="center">
                        <!-- First -->
                        <ul class="first-ul">
                            <li class="first-li">
                                {{ item.id }}

                                <!-- Second -->
                                <ul [hidden]="!item.isShow" class="second-ul">
                                    <li *ngFor="let secondItem of item.list;" class="second-li">
                                        {{ secondItem.id }}

                                        <!-- Third -->
                                        <ul [hidden]="!secondItem.isShow" class="third-ul">
                                            <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                                                {{ thirdItem.id }}
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                    <!-- 名称 -->
                    <td nzAlign="left">
                        <!-- First -->
                        <ul class="first-ul">
                            <li class="first-li">
                                <p class="put-away-p" (click)="onTableOneItem(item)">
                                    <i 
                                        *ngIf="item.list && item.list.length > 0"
                                        nz-icon
                                        [nzType]="item.isShow ? 'caret-down' : 'caret-right'"
                                        nzTheme="outline">
                                    </i>
                                    <b class="p-l-8">{{ item.name }}</b>
                                </p>

                                <!-- Second -->
                                <ul [hidden]="!item.isShow" class="second-ul p-l-20">
                                    <li *ngFor="let secondItem of item.list;" class="second-li">
                                        <p class="put-away-p" (click)="onTableSecondItem(secondItem)">
                                            <i 
                                                *ngIf="secondItem.list && secondItem.list.length > 0"
                                                nz-icon
                                                [nzType]="secondItem.isShow ? 'caret-down' : 'caret-right'"
                                                nzTheme="outline">
                                            </i>
                                            <span class="main-text-color p-l-8">{{ secondItem.name }}</span>
                                        </p>

                                        <!-- Third -->
                                        <ul [hidden]="!secondItem.isShow" class="third-ul p-l-22">
                                            <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                                                <span class="secondary-text-color">{{ thirdItem.name }}</span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                    <!-- 状态 -->
                    <td nzAlign="center">
                        <!-- First -->
                        <ul class="first-ul">
                            <li class="first-li">
                                <span [ngStyle]="{'color': item.status === 1 ? '#52c41a' : '#ff4d4f'}">
                                    {{ status_to_text(item.status) }}
                                </span>

                                <!-- Second -->
                                <ul [hidden]="!item.isShow" class="second-ul">
                                    <li *ngFor="let secondItem of item.list;" class="second-li">
                                        <span [ngStyle]="{'color': secondItem.status === 1 ? '#52c41a' : '#ff4d4f'}">
                                            {{ status_to_text(secondItem.status) }}
                                        </span>

                                        <!-- Third -->
                                        <ul [hidden]="!secondItem.isShow" class="third-ul">
                                            <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                                                <span [ngStyle]="{'color': thirdItem.status === 1 ? '#52c41a' : '#ff4d4f'}">
                                                    {{ status_to_text(thirdItem.status) }}
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                    <!-- 适用用户 -->
                    <td nzAlign="center">
                        <!-- First -->
                        <ul class="first-ul">
                            <li class="first-li">
                                <nz-tag [nzColor]="item.userType === 2 ? 'processing' : (item.userType === 1 ? 'success' : 'default')">
                                    {{ userType_to_text(item.userType) }}
                                </nz-tag>

                                <!-- Second -->
                                <ul [hidden]="!item.isShow" class="second-ul">
                                    <li *ngFor="let secondItem of item.list;" class="second-li">
                                        <nz-tag [nzColor]="secondItem.userType === 2 ? 'processing' : (secondItem.userType === 1 ? 'success' : 'default')">
                                            {{ userType_to_text(secondItem.userType) }}
                                        </nz-tag>

                                        <!-- Third -->
                                        <ul [hidden]="!secondItem.isShow" class="third-ul">
                                            <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                                                <nz-tag [nzColor]="thirdItem.userType === 2 ? 'processing' : (thirdItem.userType === 1 ? 'success' : 'default')">
                                                    {{ userType_to_text(thirdItem.userType) }}
                                                </nz-tag>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                    <!-- 跳转方式 -->
                    <td nzAlign="center">
                        <!-- First -->
                        <ul class="first-ul">
                            <li class="first-li">
                                <!-- {{ type_to_text(item.type) }} -->
                                <span>-</span>

                                <!-- Second -->
                                <ul [hidden]="!item.isShow" class="second-ul">
                                    <li *ngFor="let secondItem of item.list;" class="second-li">
                                        <!-- {{ type_to_text(secondItem.type) }} -->
                                        <span>-</span>

                                        <!-- Third -->
                                        <ul [hidden]="!secondItem.isShow" class="third-ul">
                                            <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                                                {{ type_to_text(thirdItem.type) }}
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                    <!-- 链接/值 -->
                    <td nzAlign="center">
                        <!-- First -->
                        <ul class="first-ul">
                            <li class="first-li">
                                {{ item.url || '-' }}

                                <!-- Second -->
                                <ul [hidden]="!item.isShow" class="second-ul">
                                    <li *ngFor="let secondItem of item.list;" class="second-li">
                                        {{ secondItem.url || '-' }}

                                        <!-- Third -->
                                        <ul [hidden]="!secondItem.isShow" class="third-ul">
                                            <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                                                {{ thirdItem.url || '-' }}
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                    <!-- 图标 -->
                    <td nzAlign="center">
                        <!-- First -->
                        <ul class="first-ul">
                            <li class="first-li">
                                <img nz-image width="24px" [nzSrc]="item.icon" [nzFallback]="fallbackImg">

                                <!-- Second -->
                                <ul [hidden]="!item.isShow" class="second-ul">
                                    <li *ngFor="let secondItem of item.list;" class="second-li">
                                        <img nz-image width="24px" [nzSrc]="secondItem.icon" [nzFallback]="fallbackImg">

                                        <!-- Third -->
                                        <ul [hidden]="!secondItem.isShow" class="third-ul">
                                            <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                                                <img nz-image width="24px" [nzSrc]="thirdItem.icon" [nzFallback]="fallbackImg">
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                    <!-- 排序 -->
                    <td nzAlign="center">
                        <!-- First -->
                        <ul class="first-ul">
                            <li class="first-li">
                                {{ (item.sort || item.sort === 0) ? item.sort : '-' }}

                                <!-- Second -->
                                <ul [hidden]="!item.isShow" class="second-ul">
                                    <li *ngFor="let secondItem of item.list;" class="second-li">
                                        {{ (secondItem.sort || secondItem.sort === 0) ? secondItem.sort : '-' }}

                                        <!-- Third -->
                                        <ul [hidden]="!secondItem.isShow" class="third-ul">
                                            <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                                                {{ (thirdItem.sort || thirdItem.sort === 0) ? thirdItem.sort : '-' }}
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                    <!-- 操作 -->
                    <td nzAlign="center" nzRight>
                        <!-- First -->
                        <ul class="first-ul">
                            <li class="first-li">
                                <button
                                    nz-button
                                    nzType="link"
                                    nzSize="small"
                                    (click)="onTableEdit(item, 1)">
                                    编辑
                                </button>
                                <button
                                    nz-button
                                    nzType="link"
                                    nzSize="small"
                                    nzDanger
                                    nz-popconfirm
                                    nzPopconfirmTitle="确认删除吗?"
                                    (nzOnConfirm)="onTableDelete(item)">
                                    删除
                                </button>

                                <!-- Second -->
                                <ul [hidden]="!item.isShow" class="second-ul">
                                    <li *ngFor="let secondItem of item.list;" class="second-li">
                                        <button
                                            *ngIf="permission.userPermission.has('ihapp:appManagement:edit')"
                                            nz-button
                                            nzType="link"
                                            nzSize="small"
                                            (click)="onTableEdit(secondItem, 2)">
                                            编辑
                                        </button>
                                        <button
                                            *ngIf="permission.userPermission.has('ihapp:appManagement:delete')"
                                            nz-button
                                            nzType="link"
                                            nzSize="small"
                                            nzDanger
                                            nz-popconfirm
                                            nzPopconfirmTitle="确认删除吗?"
                                            (nzOnConfirm)="onTableDelete(secondItem)"
                                            class="delete">
                                            删除
                                        </button>

                                        <!-- Third -->
                                        <ul [hidden]="!secondItem.isShow" class="third-ul">
                                            <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                                                <button
                                                    *ngIf="permission.userPermission.has('ihapp:appManagement:edit')"
                                                    nz-button
                                                    nzType="link"
                                                    nzSize="small"
                                                    (click)="onTableEdit(thirdItem, 3)">
                                                    编辑
                                                </button>
                                                <button
                                                    *ngIf="permission.userPermission.has('ihapp:appManagement:delete')"
                                                    nz-button
                                                    nzType="link"
                                                    nzSize="small"
                                                    nzDanger
                                                    nz-popconfirm
                                                    nzPopconfirmTitle="确认删除吗?"
                                                    (nzOnConfirm)="onTableDelete(thirdItem)"
                                                    class="delete">
                                                    删除
                                                </button>
                                                <button
                                                    *ngIf="permission.userPermission.has('ihapp:appManagement:edit') && thirdItem.type == 4"
                                                    nz-button
                                                    nzType="link"
                                                    nzSize="small"
                                                    (click)="showRelationGoodsModal(thirdItem, 0)">
                                                    关联商品
                                                </button>
                                                <button
                                                    *ngIf="permission.userPermission.has('ihapp:appManagement:edit') && thirdItem.type == 4"
                                                    nz-button
                                                    nzType="link"
                                                    nzSize="small"
                                                    nzDanger
                                                    (click)="showRelationGoodsModal(thirdItem, 1)">
                                                    移除商品
                                                </button>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
</nz-card>

<!-- 一级弹窗 -->
<nz-modal [(nzVisible)]="isOneModalShow" [nzTitle]="modalForm.id ? '编辑一级分类' : '新增一级分类'" (nzOnCancel)="onModalClose()"
    [nzFooter]="null" [nzStyle]="{ width: '600px' }">
    <ng-container *nzModalContent>
        <!-- 名称 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>名称</nz-form-label>
            <nz-form-control nzSpan="20">
                <input nz-input [(ngModel)]="modalForm.name" placeholder="请输入" />
            </nz-form-control>
        </nz-form-item>
        <!-- 排序 -->
        <nz-form-item>
            <nz-form-label nzSpan="4">排序</nz-form-label>
            <nz-form-control nzSpan="20">
                <input nz-input maxlength="8" [(ngModel)]="modalForm.sort" placeholder="请输入" />
            </nz-form-control>
        </nz-form-item>
        <article class="modal-pic-box">
            <!-- 顶部图片 -->
            <nz-form-item>
                <nz-form-label>顶部图片</nz-form-label>
                <nz-form-control>
                    <nz-upload nzAccept="image/*" nzAction="" nzListType="picture-card" (nzChange)="onModalPreview($event)"
                        [nzShowUploadList]="false">
                        <ng-container *ngIf="!modalForm.icon">
                            <i class="upload-icon" nz-icon nzType="plus"></i>
                        </ng-container>
                        <img *ngIf="modalForm.icon" [src]="modalForm.icon" style="width: 100%" />
                        <i *ngIf="modalForm.icon" (click)="onDelectImg();$event.stopPropagation();" nz-icon nzType="close"
                            nzTheme="outline" class="delete-icon"></i>
                    </nz-upload>
                </nz-form-control>
            </nz-form-item>
        </article>
        <!-- 跳转方式
        <nz-form-item *ngIf="modalForm.icon">
            <nz-form-label>跳转方式</nz-form-label>
            <nz-form-control>
                <nz-radio-group [(ngModel)]="modalForm.type">
                    <span *ngFor="let item of typeSet | keyvalue;">
                        <label *ngIf="item.key != 4" nzValue="{{item.key}}" nz-radio>{{item.value}}</label>
                    </span>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item> -->
        <!-- 链接/值
        <nz-form-item *ngIf="modalForm.icon">
            <nz-form-label>{{typeSet[modalForm.type] || '链接'}}</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input [(ngModel)]="modalForm.url" (input)="oninputLink($event)"
                    placeholder="请输入{{ typeSet[modalForm.type] || '链接' }}" />
            </nz-form-control>
        </nz-form-item> -->

        <!-- 链接 -->
        <nz-form-item *ngIf="modalForm.icon">
            <nz-form-label nzSpan="4">链接</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-select
                    nzShowSearch
                    nzAllowClear
                    nzPlaceHolder="请选择链接"
                    [(ngModel)]="modalForm.url"
                >
                    <ng-container *ngFor="let option of mappingOptions">
                        <nz-option [nzLabel]="option.name" [nzValue]="option.key"></nz-option>
                    </ng-container>
                </nz-select>
            </nz-form-control>
        </nz-form-item>

        <!-- 参数 -->
        <nz-form-item *ngIf="modalForm.icon">
            <nz-form-label nzSpan="4">参数</nz-form-label>
            <nz-form-control nzSpan="20">
                <input
                    nz-input
                    placeholder="请输入参数，多个参数用@符号隔开"
                    [(ngModel)]="modalForm.params"
                />
            </nz-form-control>
        </nz-form-item>

        <!-- 适用用户 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>适用用户</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-checkbox-wrapper (nzOnChange)="logUserType($event)">
                    <label nz-checkbox [nzValue]="2" [ngModel]="bUserType">B端</label>
                    <label nz-checkbox [nzValue]="1" [ngModel]="cUserType">C端</label>
                </nz-checkbox-wrapper>
            </nz-form-control>
        </nz-form-item>
        <!-- 适用终端 -->
        <nz-form-item>
            <nz-form-label nzSpan="4">适用终端</nz-form-label>
            <nz-form-control nzSpan="20">
                <div class="p-b-5 m-b-8" style="border-bottom: 1px solid rgb(233, 233, 233);">
                    <label
                      nz-checkbox
                      [(ngModel)]="terminalAllChecked"
                      (ngModelChange)="terminalUpdateAllChecked()"
                      [nzIndeterminate]="terminalIndeterminate"
                    >
                      全选
                    </label>
                </div>
                <nz-checkbox-wrapper style="width: 100%;" (nzOnChange)="channelChange($event)">
                    <div nz-row>
                        <div nz-col *ngFor="let option of channeloptions">
                            <label nz-checkbox [nzValue]="option.value" [(ngModel)]="option.checked">{{ option.label }}</label>
                        </div>
                    </div>
                </nz-checkbox-wrapper>
            </nz-form-control>
        </nz-form-item>
        <!-- 状态 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>状态</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-radio-group [(ngModel)]="modalForm.status">
                    <label nz-radio [nzValue]="1">启用</label>
                    <label nz-radio [nzValue]="0">禁用</label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item>
        <footer class="app-modal-foot">
            <button nz-button nzType="default" (click)="onModalClose()">取消</button>
            <button nz-button nzType="primary" (click)="onConfirm(1)">确定</button>
        </footer>
    </ng-container>
</nz-modal>

<!-- 二级弹窗 -->
<nz-modal [(nzVisible)]="isTwoModalShow" [nzTitle]="modalForm.id ? '编辑二级分类' : '新增二级分类'" (nzOnCancel)="onModalClose()"
    [nzFooter]="null" [nzStyle]="{ width: '600px' }">
    <ng-container *nzModalContent>
        <!-- 上级分类 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>上级分类</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-select nzAllowClear nzShowSearch nzPlaceHolder="请选择" [(ngModel)]="modalForm.pid">
                    <nz-option *ngFor="let item of categoryList" nzValue="{{item.id}}" nzLabel="{{item.name}}">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <!-- 名称 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>名称</nz-form-label>
            <nz-form-control nzSpan="20">
                <input nz-input [(ngModel)]="modalForm.name" placeholder="请输入" />
            </nz-form-control>
        </nz-form-item>
        <!-- 排序 -->
        <nz-form-item>
            <nz-form-label nzSpan="4">排序</nz-form-label>
            <nz-form-control nzSpan="20">
                <input nz-input maxlength="8" [(ngModel)]="modalForm.sort" placeholder="请输入" />
            </nz-form-control>
        </nz-form-item>
        <!-- 适用用户 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>适用用户</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-radio-group [(ngModel)]="modalForm.userType">
                    <nz-checkbox-wrapper (nzOnChange)="logUserType($event)">
                        <label nz-checkbox [nzValue]="2" [ngModel]="bUserType">B端</label>
                        <label nz-checkbox [nzValue]="1" [ngModel]="cUserType">C端</label>
                    </nz-checkbox-wrapper>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item>
        <!-- 状态 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>状态</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-radio-group [(ngModel)]="modalForm.status">
                    <label nz-radio [nzValue]="1">启用</label>
                    <label nz-radio [nzValue]="0">禁用</label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item>
        <footer class="app-modal-foot">
            <button nz-button nzType="default" (click)="onModalClose()">取消</button>
            <button nz-button nzType="primary" (click)="onConfirm(2)">确定</button>
        </footer>
    </ng-container>
</nz-modal>

<!-- 三级弹窗 -->
<nz-modal [(nzVisible)]="isThreeModalShow" [nzTitle]="modalForm.id ? '编辑三级分类' : '新增三级分类'" (nzOnCancel)="onModalClose()"
    [nzFooter]="null" [nzStyle]="{ width: '600px' }">
    <ng-container *nzModalContent>
        <!-- 上级分类 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>上级分类</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-select nzAllowClear nzShowSearch nzPlaceHolder="请选择" [(ngModel)]="modalForm.pid">
                    <nz-option *ngFor="let item of categoryList;" nzValue="{{item.id}}" nzLabel="{{item.name}}">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <!-- 名称 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>名称</nz-form-label>
            <nz-form-control nzSpan="20">
                <input nz-input [(ngModel)]="modalForm.name" placeholder="请输入" />
            </nz-form-control>
        </nz-form-item>
        <!-- 排序 -->
        <nz-form-item>
            <nz-form-label nzSpan="4">排序</nz-form-label>
            <nz-form-control nzSpan="20">
                <input nz-input maxlength="8" [(ngModel)]="modalForm.sort" placeholder="请输入" />
            </nz-form-control>
        </nz-form-item>
        <!-- 图标 -->
        <article class="modal-pic-box">
            <nz-form-item>
                <nz-form-label nzRequired>图标</nz-form-label>
                <nz-form-control>
                    <nz-upload nzAccept="image/*" nzAction="" nzListType="picture-card" (nzChange)="onModalPreview($event)"
                        [nzShowUploadList]="false">
                        <ng-container *ngIf="!modalForm.icon">
                            <i class="upload-icon" nz-icon nzType="plus"></i>
                        </ng-container>
                        <img *ngIf="modalForm.icon" [src]="modalForm.icon" style="width: 100%" />
                    </nz-upload>
                </nz-form-control>
            </nz-form-item>
        </article>
        <!-- 跳转方式
        <nz-form-item>
            <nz-form-label nzRequired>跳转方式</nz-form-label>
            <nz-form-control>
                <nz-radio-group [(ngModel)]="modalForm.type">
                    <label *ngFor="let item of typeSet | keyvalue;" nzValue="{{item.key}}" nz-radio>{{item.value}}</label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item> -->
        <!-- 链接/值
        <nz-form-item *ngIf="modalForm.type != 4">
            <nz-form-label nzRequired>{{typeSet[modalForm.type] || '链接'}}</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input [(ngModel)]="modalForm.url" (input)="oninputLink($event)"
                    placeholder="请输入{{ typeSet[modalForm.type] || '链接' }}" />
            </nz-form-control>
        </nz-form-item> -->

        <!-- 链接 -->
        <nz-form-item>
            <nz-form-label nzSpan="4">链接</nz-form-label>
            <nz-form-control nzSpan="20">
                <div class="select-url">
                    <div style="width: 80%;">
                        <nz-select
                            nzShowSearch
                            nzAllowClear
                            nzPlaceHolder="请选择链接"
                            [(ngModel)]="modalForm.url"
                            [nzDisabled]="urlChecked"
                        >
                            <ng-container *ngFor="let option of mappingOptions">
                                <nz-option [nzLabel]="option.name" [nzValue]="option.key"></nz-option>
                            </ng-container>
                        </nz-select>
                        <p *ngIf="modalForm.url" class="mapping-remark">{{ remarkFilter(modalForm.url) }}</p>
                    </div>

                    <label nz-checkbox class="m-l-15 m-t-5" [(ngModel)]="urlChecked" (ngModelChange)="urlCheckedChange($event)">分类</label>
                </div>
            </nz-form-control>
        </nz-form-item>

        <!-- 参数 -->
        <nz-form-item>
            <nz-form-label nzSpan="4">参数</nz-form-label>
            <nz-form-control nzSpan="20">
                <input
                    nz-input
                    placeholder="请输入参数，多个参数用@符号隔开"
                    [(ngModel)]="modalForm.params"
                    [disabled]="urlChecked"
                />
            </nz-form-control>
        </nz-form-item>

        <!-- 状态 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>状态</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-radio-group [(ngModel)]="modalForm.status">
                    <label nz-radio [nzValue]="1">启用</label>
                    <label nz-radio [nzValue]="0">禁用</label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item>
        <footer class="app-modal-foot">
            <button nz-button nzType="default" (click)="onModalClose()">取消</button>
            <button nz-button nzType="primary" (click)="onConfirm(3)">确定</button>
        </footer>
    </ng-container>
</nz-modal>

<!-- S 关联商品 -->
<nz-modal
    [nzWidth]="1100"
    [(nzVisible)]="isRelationVisible"
    [nzTitle]="relationGoodType === 0 ? '批量关联商品' : '批量移除商品'"
    [nzFooter]="null"
    (nzOnCancel)="relationCancel()">
    <ng-container *nzModalContent>
        <div class="common-search-wrap">
            <div class="common-search-forms">
                <div class="common-form-item">
                    <label class="common-search-label">商品</label>
                    <div class="common-search-conrol">
                        <input nz-input placeholder="请输入商品编号或名称" [(ngModel)]="goodTableParams.name" />
                    </div>
                </div>

                <div class="common-form-item">
                    <div class="common-search-conrol">
                        <button nz-button nzType="primary" class="m-r-8" (click)="searchGoodTable()">查询</button>
                        <button nz-button nzType="default" class="m-r-8" (click)="resetGoodTable()">重置</button>
                        <button
                            nz-button
                            nzType="primary"
                            nzDanger
                            [nzLoading]="subRelationGoodLoading"
                            [disabled]="!setOfCheckedId.size"
                            (click)="subRelationData()">
                            {{ relationGoodType === 0 ? '关联' : '移除' }}已选商品{{ setOfCheckedId.size }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="table-box p-t-10">
            <nz-table
                #goodsTable
                nzSize="small"
                nzShowSizeChanger
                nzShowQuickJumper
                nzOuterBordered
                [nzFrontPagination]="false"
                [nzLoadingDelay]="100"
                [nzLoading]="goodTableParams.loading"
                [nzData]="goodTable"
                [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
                [nzTotal]="goodTableParams.total"
                [nzPageIndex]="goodTableParams.page"
                [nzPageSize]="goodTableParams.pageSize"
                [nzShowTotal]="totalTemplate"
                (nzPageIndexChange)="goodIndexChange($event)"
                (nzPageSizeChange)="goodSizeChange($event)"
                (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
                >
                <thead>
                    <tr>
                        <th
                            nzWidth="80px"
                            [(nzChecked)]="checked"
                            [nzIndeterminate]="indeterminate"
                            (nzCheckedChange)="onAllChecked($event)"
                        ></th>
                        <th nzAlign="center" nzWidth="100px">ID</th>
                        <th nzAlign="center">商品</th>
                        <th nzAlign="center">销量</th>
                        <th nzAlign="center">销量库存</th>
                    </tr>
                </thead>
        
                <tbody>
                    <tr *ngFor="let data of goodsTable.data; let index = index;">
                        <td [nzChecked]="setOfCheckedId.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
                        <!-- ID -->
                        <td nzAlign="center">{{ data.id }}</td>
                        <!-- 商品 -->
                        <td nzAlign="left">
                            <div class="goods-name">
                                <img nz-image width="42px" height="42px" [nzSrc]="data.icon || fallbackImg" />
                                <div class="goods-text">
                                  <span [title]="data.name">{{ data.name }}</span>
                                </div>
                            </div>
                        </td>
                        <!-- 销量 -->
                        <td nzAlign="center">{{ data.salesVolume }}</td>
                        <!-- 销量库存 -->
                        <td nzAlign="center">{{ data.stockNum }}</td>
                    </tr>
                </tbody>
            </nz-table>
      
            <!-- 分页template -->
            <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
        </div>
    </ng-container>
</nz-modal>
<!-- E 关联商品 -->
